<template>
  <div class="daikuan_details">
    <!-- 头部导航栏 -->
    <head-component :title="name"/>
    <!-- 内容部分 -->
    <div class="details_box">
      <!-- <img src="http://www.yykjxxzx.com/static/upload/18437923701.jpg" alt=""> -->
      <img :src="detailsImg" alt="">
      <div v-if="type!=5 && type!=7" class="share_btn_box" @click="shareBtn">
        <div class="share_btn f24">立即推广</div>
      </div>

    </div>
    <layout-mask class="share_hide" @click="isShow = false" v-if="isShow">
      <div class="hide_details">
        <div class="hide_top_box">
          <div class="hide_top_list" @click="$router.push(`/daikuanImg?id=${id}&&name=${name}`)">
            <div class="hide_top_img">
              <img src="../../common/icon/home/img.png" alt="">
            </div>
            <div class="list_name">生成图片</div>
          </div>
          <div class="hide_top_list copy"
            ref="copyBtn"
            @click="copyBtn"
            :data-clipboard-text="num">
            <div class="hide_top_img">
              <img src="../../common/icon/home/url.png" alt="">
            </div>
            <div class="list_name">复制链接</div>
          </div>
        </div>
        <div class="hide_btn_box">
          <div class="hide_btn f24">立即推广</div>
        </div>
      </div>
    </layout-mask>
  </div>
</template>
<script>
let cliBtn;
import Clipboard from 'clipboard';
import layoutMask from '@/components/layout/layout_mask';
import headComponent from '@/components/layout/head';
export default {
  name: '',
  components: {
    layoutMask,
    headComponent
  },
  data() {
    return {
      id:　this.$route.query.id - 0,
      name:　this.$route.query.name,
      type: this.$route.query.type,
      rightWords: '保存',
      isShow: false,
      num: '',
      detailsImg: ''
    }
  },
  watch: {},
  mounted() {
    this.getNews()
    // 创建复制按钮
    cliBtn = new Clipboard('.copy');
    return cliBtn;

  },
  methods: {
    shareBtn(){ // 立即推广按钮
      this.isShow = true;
    },
    // 复制链接部分
    copy () {
      this.$refs.copyBtn.click();
    },
    copyBtn () {
      this.$toast('复制成功');
    },
    // 获取页面初始信息
    getNews(){
      let $this = this;
      var t = $this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      var data = {u_id: localStorage.getItem('uid'), token:localStorage.getItem('token'),p_id:$this.id};
      $this.$axios.post('/index.php?m=index&c=pro_detail',data)
        .then((res) => {
          t.clear();
          if(res.data.code == 1){
            $this.detailsImg = res.data.detail;
            $this.num = res.data.p_href;
          }else{
            $this.$toast({
              message: res.data.msg,
              duration: 800
            })
          }
        })
    }
  },
}
</script>
<style lang="less">
  .details_box{
    // padding: 0 0.4rem;
    margin-top: 1.2rem;
    border-top: 1Px solid #f5f5f5;
    img{ width:100% }
    // 显示按钮部分
    .share_btn_box{
      position: fixed;
      width: 18%;
      height: 0;
      padding-bottom: 18%;
      border-radius: 50%;
      bottom: 1rem;
      left: 42%;
      background: linear-gradient(to bottom, #985bf6, #515ffd);
      .share_btn{
        line-height: 1.8rem;
        text-align: center;
        color: #fff;
      }
    }
  }
  // 隐藏按钮遮罩层
  .share_hide{
    .hide_details{
      position: fixed;
      bottom: 1rem;
      left: 0;
      width: 100%;
      z-index: 10000;
    }
    .hide_top_box{
      margin-bottom: 2.3rem;
      display: flex;
      display: -webkit-flex;
      padding: 0 1rem;
      align-items: center;
      -webkit-align-items: center;
      text-align: center;
      -webkit-text-align: center;
      justify-content: space-around;
      -webkit-justify-content: space-around;
      .hide_top_list{
        .hide_top_img{
          width: 1.2rem;
          height: 1.2rem;
          display: block;
          margin: 0 auto;
          border-radius: 50%;
          background: linear-gradient(to bottom, #985bf6, #515ffd);
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          justify-content:center;
          -webkit-justify-content: space-around;
        }
        img{ width: 50%;}
        .list_name{ color: #fff; opacity: .8; margin-top: 0.2rem; }
      }
    }
    .hide_btn_box{
      position: fixed;
      width: 18%;
      height: 0;
      padding-bottom: 18%;
      border-radius: 50%;
      margin: 0 auto;
      bottom: 1rem;
      left: 42%;
      background: linear-gradient(to bottom, #985bf6, #515ffd);

      .hide_btn{
        line-height: 1.8rem;
        text-align: center;
        color: #fff;
      }
    }
  }
</style>
